import styles from './index.less';
// 配置antd 中文
import zhCN from 'antd/lib/locale/zh_CN';
import { ConfigProvider, Menu, Dropdown, Avatar, message } from 'antd';
import Sider from './Sider';
import ErrorBoundary from '@/components/common/ErrorBoundary';
import ErrorFallback from './ErrorFallback';
import ScrollToTop from '@/components/common/ScrollToTop';
import React, { useState } from 'react';
import Breadcrum from './Breadcrumb';
import { UserOutlined } from '@ant-design/icons';
import NavLink from 'umi/navlink';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { useHistory } from 'dva';

function BasicLayout(props) {
  const [collapsed, setCollapsed] = useState(false);
  const [sideBarWidth, setSideBarWidth] = useState('210px');
  const [openKeys, setOpenKeys] = useState([]);
  const [list, setList] = useState('');
  const [visible, setVisible] = useState(false);
  const [selectedKey, setSelectedKey] = useState(['首页']);

  const history = useHistory();
  const handleMenuClick = () => {
    setVisible(false);
  };
  const toggleCollapsed = () => {
    setOpenKeys('');
    setCollapsed(!collapsed);
    collapsed ? setSideBarWidth('210px') : setSideBarWidth('100px');
  };
  const tologin = () => {
    history.push('/');
    window.localStorage.removeItem('token');
    message.success('成功退出！');
  };
  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="0">
        <NavLink to="/home" exact activeClassName={styles.selected}>
          首页
        </NavLink>
      </Menu.Item>
      <Menu.Item key="1">个人信息</Menu.Item>
      <Menu.Divider />
      <Menu.Item key="3" onClick={tologin}>
        退出登录
      </Menu.Item>
    </Menu>
  );
  const handleVisibleChange = flag => {
    setVisible(flag);
  };
  return (
    <ConfigProvider locale={zhCN}>
      <div className={styles.normal}>
        <div className={styles.top}>
          <div className={styles.tleft} style={{ width: sideBarWidth }}></div>
          <div className={styles.tright} style={{ width: `calc( 100%  - ${sideBarWidth})` }}>
            <div className={styles.siderbtn} onClick={toggleCollapsed} style={{ marginBottom: 16 }}>
              {/* <Icon type={collapsed ? 'menu-unfold' : 'menu-fold'} />
               */}
              {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
            </div>
            <div className={styles.siderurl}>
              <Breadcrum
                openKeys={openKeys}
                setOpenKeys={setOpenKeys}
                list={list}
                setSelectedKey={setSelectedKey}
              />
            </div>
            <div className={styles.Avtar}>
              <Dropdown overlay={menu} onVisibleChange={handleVisibleChange} visible={visible}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                  <Avatar size="large" icon={<UserOutlined />} />
                </a>
              </Dropdown>
            </div>
          </div>
        </div>
        <div className={styles.bottom}>
          <div className={styles.bleft} style={{ width: sideBarWidth }}>
            <Sider
              collapsed={collapsed}
              sideBarWidth={sideBarWidth}
              openKeys={openKeys}
              setOpenKeys={setOpenKeys}
              setList={setList}
              selectedKey={selectedKey}
              setSelectedKey={setSelectedKey}
            />
          </div>
          <div className={styles.bright} style={{ width: `calc( 100%  - ${sideBarWidth})` }}>
            <ErrorBoundary FallbackComponent={ErrorFallback}>
              <ScrollToTop>{props.children}</ScrollToTop>
            </ErrorBoundary>
          </div>
        </div>
      </div>
    </ConfigProvider>
  );
}

export default BasicLayout;
